<template>
	<div class="cargo-index">
		<el-row class="elrow">
			<!--返回-->
			<el-button 
			 	type="primary" 
			 	icon="el-icon-arrow-left" 
			 	circle 
			 	@click = "getBack"
			 ></el-button>
			 <!--添加-->
			<el-button 
			 	type="primary" 
			 	icon="el-icon-edit" 
			 	circle 
			 	@click = "addInfo"
			 ></el-button>
		</el-row>
		<!--显示内容-->
		<el-tabs v-model="activeName" @tab-click="handleClick">
			<!--发货方-->
		    <el-tab-pane label="发货方" name="consigner">
		    	<el-table
				    :data="tableData0"
				    border
				    style="width: 100%">
				    <el-table-column
				      fixed
				      prop="createdTime"
				      label="日期"
				     >
				    </el-table-column>
				    <el-table-column
				      prop="shipmentName"
				      label="发货方"
				    >
				    </el-table-column>
				    <el-table-column
				      prop="startArea"
				      label="始发地"
				      >
				    </el-table-column>
				    <el-table-column
				      prop="minuteArea"
				      label="详情地址"
				     >
				    </el-table-column>
				    <el-table-column
				      prop="contact"
				      label="联系人"
				     >
				    </el-table-column>
				    <el-table-column
				      prop="phone"
				      label="电话"
				     >
				    </el-table-column>
				    <el-table-column
				      prop="landline"
				      label="固定电话"
				     >
				    </el-table-column>
				    <el-table-column
				      prop="userName"
				      label="创建人"
				      width="120">
				    </el-table-column>
				    <el-table-column
				      prop="modifiedTime"
				      label="修改时间"
				      >
				    </el-table-column>
				    <el-table-column
				      prop="remark"
				      label="备注"
				      >
				    </el-table-column>
				    <el-table-column
				      fixed="right"
				      label="操作"
				     >
				      <template slot-scope="scope">
				        <el-button @click.native.prevent="confirmDele(scope.$index, tableData0)" type="text" size="small">移除</el-button>
				        <el-button 
				        	type="text" 
				        	size="small"
				        	@click.native.prevent="redactRow(scope.$index, tableData0)"
				        >编辑</el-button>
				      </template>
				    </el-table-column>
				</el-table>
		    </el-tab-pane>
		    <!--收货方-->
		    <el-tab-pane label="收货方" name="receiving">
		    	<!--收货方-->
		    	<el-table
				    :data="tableData1"
				    border
				    style="width: 100%">
				    <el-table-column
				      fixed
				      prop="createdTime"
				      label="日期"
				     >
				    </el-table-column>
				    <el-table-column
				      prop="receivingParty"
				      label="收货方"
				    >
				    </el-table-column>
				    <el-table-column
				      prop="endArea"
				      label="目的地"
				      >
				    </el-table-column>
				    <el-table-column
				      prop="minuteArea"
				      label="详情地址"
				     >
				    </el-table-column>
				    <el-table-column
				      prop="contact"
				      label="联系人"
				     >
				    </el-table-column>
				    <el-table-column
				      prop="phone"
				      label="电话"
				     >
				    </el-table-column>
				    <el-table-column
				      prop="userName"
				      label="创建人"
				      width="120">
				    </el-table-column>
				    <el-table-column
				      prop="modifiedTime"
				      label="修改时间"
				      >
				    </el-table-column>
				    <el-table-column
				      prop="remark"
				      label="备注"
				      >
				    </el-table-column>
				    <el-table-column
				      fixed="right"
				      label="操作"
				     >
				      <template slot-scope="scope">
				        <el-button @click.native.prevent="confirmDele(scope.$index, tableData1)" type="text" size="small">移除</el-button>
				        <el-button 
				        	type="text" 
				        	size="small" 
				        	@click.native.prevent="redactRow(scope.$index, tableData1)"
				        >编辑</el-button>
				      </template>
				    </el-table-column>
				</el-table>
		    </el-tab-pane>
		</el-tabs>
		
		<!--收发货添加-->
		<div class="info" v-show="isInfo" @click="addInfo">
           <div class="info-content" @click.stop>
           	     <!--头部-->
			     <div class="header-title">{{applyInfo.title}}</div>
			     <!--遮罩层-->
			     <div class="layer" v-show="isLayer">
			     	<!--创建中-->
			     	<div style="width:100px; line-height:40px;text-align: center; background:rgba(0,0,0,.6);color:#eee; border-radius:4px; ">{{createds}}</div>
			     </div>
			     <!--内容-->
			     <div class="add-content">
				     <div class="inputStyle" v-for="(item,index) in applyInfo.data" :key="index">
						 	<span class="title">
						 		{{item.name}}:
						 	<span class="my-icon-hongdian iconfont icon-color" v-show="item.colorRed"></span>
						 	</span>
						 	<el-tooltip class="item" effect="dark" :content="item.content ? '该信息为必填' : '不是必填项'" placement="top-end">
							 	<el-input
								    :placeholder="item.placeholder"
									v-model="model[index].value"
									autocomplete="off"
									clearable
									maxlength=100
									:key="index"
								>
								</el-input>
							</el-tooltip>
					 </div> 
					 <!--<div class="inputStyle">
						 	<span class="title">
						 		始发地:
						 	<span class="my-icon-hongdian iconfont icon-color"></span>
						 	</span>
						 	<el-tooltip class="item" effect="dark" content="该信息为必输项" placement="top-end">
							 	<el-input
								    placeholder="请输入始发地"
									v-model="inputs.startArea"
									autocomplete="off"
									clearable
									maxlength=100
								>
								</el-input>
							</el-tooltip>
					 </div> 
					  <div class="inputStyle">
						 	<span class="title">
						 		详细地址:
						 	<span class="my-icon-hongdian iconfont icon-color"></span>
						 	</span>
						 	<el-tooltip class="item" effect="dark" content="该信息为必输项" placement="top-end">
							 	<el-input
								    placeholder="请输入详细地址"
									v-model="inputs.minuteArea"
									autocomplete="off"
									clearable
									maxlength=100
								>
								</el-input>
							</el-tooltip>
					 </div> 
					 <div class="inputStyle">
						 	<span class="title">
						 		联系人:
						 	<span class="my-icon-hongdian iconfont icon-color"></span>
						 	</span>
						 	<el-tooltip class="item" effect="dark" content="该信息为必输项" placement="top-end">
							 	<el-input
								    placeholder="请输入联系人"
									v-model="inputs.contact"
									autocomplete="off"
									clearable
									maxlength=100
								>
								</el-input>
							</el-tooltip>
					 </div> 
					 <div class="inputStyle">
						 	<span class="title">
						 		电话:
						 	<span class="my-icon-hongdian iconfont icon-color"></span>
						 	</span>
						 	<el-tooltip class="item" effect="dark" content="该信息为必输项" placement="top-end">
							 	<el-input
								    placeholder="请输入电话"
									v-model="inputs.phone"
									autocomplete="off"
									clearable
									maxlength=100
								>
								</el-input>
							</el-tooltip>
					 </div> 
					 <div class="inputStyle">
						 	<span class="title">
						 		固定电话:
						 	</span>
						 	<el-tooltip class="item" effect="dark" content="该信息为必输项" placement="top-end">
							 	<el-input
								    placeholder="请输入固定电话"
									v-model="inputs.landline"
									autocomplete="off"
									clearable
									maxlength=100
								>
								</el-input>
							</el-tooltip>
					 </div>-->
					 <div class="inputStyle">
					 	<span class="title">备注:</span>
					 	<textarea name="备注" rows="" cols="" class="el-textarea my-textarea" v-model="remark" maxlength=500></textarea>
					 </div> 
					 <el-row style="text-align: center;">
					 	 <el-button type="primary" :disabled='isdbShow' @click="SubmitData">提交</el-button>
					 	 <el-button type="info" @click="addInfo">取消</el-button>
					 </el-row>
				</div>
           </div>
		</div>
		
		<!--收发货信息修改-->
		<div class="info" v-show="issgInfo" @click = "issgInfos">
		      <div class="info-content" @click.stop>
		      	   <!--头部-->
			     <div class="header-title">{{title}}</div>
			     <!--遮罩层-->
			     <!--创建中-->
			     <div class="layer" v-show="isslayer">
			     	<div style="width:100px; line-height:40px;text-align: center; background:rgba(0,0,0,.6);color:#eee; border-radius:4px;">{{iscreated}}</div>
			     </div>	
			     	
			     <!--内容-->
			     <div class="add-content">
				    <div class="inputStyle" >
						 	<span class="title">
						 		{{fhupdata[0].shipmentName}}:
						 	<span class="my-icon-hongdian iconfont icon-color"></span>
						 	</span>
						 	<el-tooltip class="item" effect="dark" content="该信息为必填" placement="top-end">
							 	<el-input
								    :placeholder="fhupdata[0].placeholder"
									v-model="inputs.shipmentName"
									autocomplete="off"
									clearable
									maxlength=100
								>
								</el-input>
							</el-tooltip>
					 </div> 
					 <div class="inputStyle">
						 	<span class="title">
						 		{{fhupdata[1].startArea}}:
						 	<span class="my-icon-hongdian iconfont icon-color"></span>
						 	</span>
						 	<el-tooltip class="item" effect="dark" content="该信息为必输项" placement="top-end">
							 	<el-input
								    :placeholder="fhupdata[1].placeholder"
									v-model="inputs.startArea"
									autocomplete="off"
									clearable
									maxlength=100
								>
								</el-input>
							</el-tooltip>
					 </div> 
					  <div class="inputStyle">
						 	<span class="title">
						 		{{fhupdata[2].minuteArea}}:
						 	<span class="my-icon-hongdian iconfont icon-color"></span>
						 	</span>
						 	<el-tooltip class="item" effect="dark" content="该信息为必输项" placement="top-end">
							 	<el-input
								    :placeholder="fhupdata[2].placeholder"
									v-model="inputs.minuteArea"
									autocomplete="off"
									clearable
									maxlength=100
								>
								</el-input>
							</el-tooltip>
					 </div> 
					 <div class="inputStyle">
						 	<span class="title">
						 		{{fhupdata[3].contact}}:
						 	<span class="my-icon-hongdian iconfont icon-color"></span>
						 	</span>
						 	<el-tooltip class="item" effect="dark" content="该信息为必输项" placement="top-end">
							 	<el-input
								    :placeholder="fhupdata[3].placeholder"
									v-model="inputs.contact"
									autocomplete="off"
									clearable
									maxlength=100
								>
								</el-input>
							</el-tooltip>
					 </div> 
					 <div class="inputStyle">
						 	<span class="title">
						 		{{fhupdata[4].phone}}:
						 	<span class="my-icon-hongdian iconfont icon-color"></span>
						 	</span>
						 	<el-tooltip class="item" effect="dark" content="该信息为必输项" placement="top-end">
							 	<el-input
								    :placeholder="fhupdata[4].placeholder"
									v-model="inputs.phone"
									autocomplete="off"
									clearable
									maxlength=100
								>
								</el-input>
							</el-tooltip>
					 </div> 
					 <div class="inputStyle">
						 	<span class="title">
						 		{{fhupdata[5].landline}}:
						 	</span>
						 	<el-tooltip class="item" effect="dark" content="该信息为必输项" placement="top-end">
							 	<el-input
								    :placeholder="fhupdata[5].placeholder"
									v-model="inputs.landline"
									autocomplete="off"
									clearable
									maxlength=100
								>
								</el-input>
							</el-tooltip>
					 </div>
					 <div class="inputStyle">
					 	<span class="title">备注:</span>
					 	<textarea name="备注" rows="" cols="" class="el-textarea my-textarea" v-model="inputs.remark" maxlength=500></textarea>
					 </div>
					 <el-row style="text-align: center;">
					 	 <el-button type="primary" :disabled='isdbShow' @click="updataget">修改</el-button>
					 	 <el-button type="info" @click="issgInfos">取消</el-button>
					 </el-row>
					</div>
		      </div>
		</div>
	</div>
</template>

<script>
export default {
	name:"cargo",
	components:{},
	props:{},
	data(){
		return {
			selectVal:[],
			createds:"",
			isLayer:false,
			issgInfo:false,
			isslayer:false,
			iscreated:"创建中...",
			title:"发货方信息修改",
			//更新模板
			fhupdata:[
		 	   {shipmentName:"发货方",placeholder:"请输入发货地"},
		 	   {startArea:"始发地",placeholder:"请输入始发地"},
		 	   {minuteArea:"详细地址",placeholder:"请输入详细地址"},
		 	   {contact:"联系人",placeholder:"请输入联系人"},
		 	   {phone:"电话",placeholder:"请输入电话"},
		 	   {landline:"固定电话",placeholder:"请输入固定电话"}
		 	  ],
			//添加模块
			fhInfoContent:{
				title:"添加发货方信息",
				data:[
				{name:"发货方",placeholder:"请输入发货方",content:true,colorRed:true},
				{name:"始发地",placeholder:"请输入始发地",content:true,colorRed:true},
				{name:"详细地址",placeholder:"请输入详细地址",content:true,colorRed:true},
				{name:"联系人",placeholder:"请输入联系人",content:true,colorRed:true},
				{name:"电话",placeholder:"请输入电话",content:true,colorRed:true},
				{name:"固定电话",placeholder:"请输入固定电话",content:false,colorRed:false}
				]
			},
			shInfoContent:{
				title:"添加收货方信息",
				data:[
				{name:"收货方",placeholder:"请输入发货方",content:true,colorRed:true},
				{name:"目的地",placeholder:"请输入始发地",content:true,colorRed:true},
				{name:"详细地址",placeholder:"请输入详细地址",content:true,colorRed:true},
				{name:"联系人",placeholder:"请输入联系人",content:true,colorRed:true},
				{name:"电话",placeholder:"请输入电话",content:true,colorRed:true},
				{name:"固定电话",placeholder:"请输入固定电话",content:false,colorRed:false}
				]
			},
			model:[{value:""},{value:""},{value:""},{value:""},{value:""},{value:""}],
			Id:"",   //指定ID
			index:"",  //tab指定index
			activeName: 'consigner',  //默认选择的name
			tableData0:[],   //渲染表格数据
			tableData1:[],
			receive: "/shipment/",    //收发货方接口
			isInfo:false,     //显示隐藏添加信息
			inputs:{
				shipmentName : "",//发货方
				startArea: "",  //始发地
				minuteArea:"",  //详细地址
				contact:"",   //联系人
				phone:"",  //电话
				landline:"" , //固定电话
				remark :""　　//备注
			},
			remark:"", 
			applyInfo:"",  //渲染添加框数据
			isdbShow:false,   //满足可提交
			userName:"",
			upData:[],     //编辑信息接收
			hId:""    //收发货方id
		}
	},
	methods:{
		//接收传过来的ID
		getCargoId(rowId){
			this.Id = rowId
			console.log(rowId)
			this.applyInfo = this.fhInfoContent
			//调用发货方数据
			this.getData()
		},
		//tab选择项
		handleClick(tab, event) {
        	console.log(typeof tab.index);
        	//0 发货方   1 收货方
        	let Index = tab.index
        	this.index = tab.index
        	switch(Index){
        		case "0": 
        		this.receive = "/shipment/";
        		this.applyInfo = this.fhInfoContent
        		break;
        		case "1":
        		this.receive = "/receive/";
        		this.applyInfo = this.shInfoContent
        		break;
        		default: this.receive =""
        	}
        	this.getData()
        },
        //获取收发货方数据
        //收货 /receive/findByCooperativeId
        //发货方/shipment/findByCooperativeId
        //查询
        getData(){
           const _this = this
           this.axios.get(`${this.baseURL}` + _this.receive + "findByCooperativeId",{
	       	params:{
	       	  	cooperativeId : _this.Id
	       	  }
            }).then(res=>{
           	  	console.log(res)
           	  	let Data = res.data.data
           	  	console.log(Data)
           	  	switch(this.index){
           	  		case "0" :
           	  		_this.tableData0 = Data; break;
           	  		case "1" :  
           	  		_this.tableData1 = Data; break;
           	  		default :
           	  		_this.tableData0 = Data;
           	  	}
           	  })
        },
        //发收货方删除
        //发货方 /shipment/delete
        //收货方 /receive/delete
        deleteRow(index,rows){
        	const _this = this
        	console.log(rows[index])
        	let delId = rows[index].id
        	let qs = require('qs')
        	console.log(delId)
        	this.axios.post(`${_this.baseURL}` + _this.receive + "delete",
        	  qs.stringify({
                    	id:delId
                	 })
        	).then(res=>{
        		console.log(res)
        	})
        },
        //删除提示
        confirmDele(index,rows){
        	const _this = this
    		_this.$confirm('此操作将永久删除该数据, 是否继续?', '提示', {
		          confirmButtonText: '确定',
		          cancelButtonText: '取消',
		          type:'warning'
		      }).then(() => {     
		      	_this.deleteRow(index,rows)
//			    this.CompanyDelete(index,rows)
		          	this.$message({
			            type:'success',
			            message:'删除成功!'
		            });
		            rows.splice(index, 1);
		        }).catch(() => {
		          this.$message({
		            type: 'info',
		            message: '已取消删除'
		          })        
		       })
        },
        //添加收发货方
        addInfo(){
        	this.isInfo = !this.isInfo
        },
        //收发货方提交
          ///发货 shipment/save
          //收货/receive/save
        SubmitData(){
        	const _this = this
        	this.createds = "创建中..."
        	console.log(this.Id)  //id
        	let fhArr;
        	switch(this.index){
        		case "0": fhArr=["shipmentName","startArea","minuteArea","contact","phone","landline","remark"];break;
        		case "1":
fhArr=["receivingParty","endArea","minuteArea","contact","phone","landline","remark"];break;
               default: fhArr=["shipmentName","startArea","minuteArea","contact","phone","landline","remark"];
        	}
        	console.log(this.model)
        	let fh = {}
        	for(var i=0;i<this.model.length; i++){
                 fh[fhArr[i]] = this.model[i].value
        	}
        	fh.userName = this.userName
        	fh.cooperativeId = this.Id
        	fh.remark = this.remark
//      	let qs = require('qs')
        	//提交请求
        	this.isLayer = true
        	this.getSubmit(fh)
        },
        //提交请求
        getSubmit(fh){
        	const _this = this
        	let qs = require('qs')
        	this.axios.post(`${this.baseURL}` + _this.receive + "save",
        		qs.stringify(fh)
        	).then(res=>{
        		if(res.status == 200){
        			_this.createds = "创建成功"
	        		setTimeout(()=>{
	        			_this.isInfo = !this.isInfo
	        			for(var j=0;j<_this.model.length;j++){
	        				_this.model[j].value = ""
	        			}
	        			_this.remark = ""
	        			_this.isLayer = false
	        			//添加成功后刷新
						_this.getData()
	        		},600)
        		}else{
        			_this.createds = "创建失败"
        			_this.isLayer = false
        		}
        	})
        },
        //获取用户名称
        getUser(){
        	if(sessionStorage.user){
        		let User = sessionStorage.user
				this.userName = User.replace(/\"/g, "");
			}
        },
        //编辑
        // 发货方/shipment/findOne
        // 收货方/receive/findOne
        redactRow(index,rows){
        	console.log(rows[index])
        	//查询收发货方ID
        	let hId = rows[index].id
        	this.hId = hId
        	let rowsData = rows[index]
        	this.issgInfos()
        	this.updataInfo(hId)
        },
        //修改信息请求查询
        updataInfo(hId){
        	const _this = this
        	this.axios.get(`${this.baseURL}` + _this.receive + "findOne",{
        	    params:{
        	    	id:hId
        	    }
        	}).then(res=>{
        		console.log(res);
        		let upData = res.data.data
        		if(res.data.status == 200){
        			 switch(_this.index){
        			 	case "0" :
        			 	_this.title = "发货方信息修改";
        			 	_this.fhupdata = [
							 	   {shipmentName:"发货方",placeholder:"请输入发货地"},
							 	   {startArea:"始发地",placeholder:"请输入始发地"},
							 	   {minuteArea:"详细地址",placeholder:"请输入详细地址"},
							 	   {contact:"联系人",placeholder:"请输入联系人"},
							 	   {phone:"电话",placeholder:"请输入电话"},
							 	   {landline:"固定电话",placeholder:"请输入固定电话"}
							 	  ];
					    break;
					    case "1" :
					    _this.title = "收货方信息修改";
					    _this.fhupdata[0].shipmentName = "收货方";
					    _this.fhupdata[0].placeholder = "请输入收货地";
					    _this.fhupdata[1].startArea = "目的地";
					    _this.fhupdata[1].placeholder = "请输入目的地";
					    upData.startArea = upData.endArea
					    upData.shipmentName = upData.receivingParty
					    break;
					   default:""
        			 }
        			 _this.inputs = upData
        		}
        	})
        },
        //修改提交
        // 收货方/receive/update...cooperativeId=1&receivingParty=宝安中心&endArea=深圳宝安&minuteArea=西乡地铁&contact=XQ222&phone=17336884678&landline&userName=admin&remark=123&id=2
        // 发货方/shipment/update...cooperativeId=1&shipmentName=龙华中心&startArea=深圳龙华&minuteArea=清湖地铁站&contact=XQ&phone=17336884678&landline&userName=admin&remark=123&id=1
        updataget(){
        	const _this = this
        	delete _this.inputs.userName
        	delete _this.inputs.createdTime
        	delete _this.inputs.modifiedTime
        	
        	switch(_this.index){
        		case "1":
        		delete _this.inputs.endArea;
        		delete _this.inputs.receivingParty; 
        		_this.inputs.receivingParty = _this.inputs.shipmentName
        		_this.inputs.endArea = _this.inputs.startArea
        		break;
        	}
        	console.log(_this.inputs)
        	let qs = require('qs')
            this.axios.post(`${this.baseURL}` + _this.receive + "update",
              qs.stringify(_this.inputs)
             ).then(res=>{
             	console.log(res);
             	_this.isslayer = true
             	if(res.data.status == 200){
             		_this.iscreated = "修改成功"
             	   	setTimeout(function(){
             	   		_this.isslayer = !_this.isslayer
             	   		_this.issgInfos()
             	   		_this.getData()
             	   	},600)
             	}else{
             		_this.iscreated = "修改失败"
             		_this.isslayer = !_this.isslayer
             	}
             })
        },
        //修改收发货方背景显示
        issgInfos(){
        	this.issgInfo = !this.issgInfo
        },
        //返回上一页
        getBack(){
           this.$emit("getBack")
        }
	},
	mounted(){
//		this.getData0()
	},
	created(){
		this.getUser()
	},
	computed:{
   }
}
</script>

<style scoped>
	.cargo-index .elrow{height:.7rem; width:auto;}
	.cargo-index >>> .el-button.is-circle {padding:0.1rem;}
	.cargo-index >>> .el-tabs__item  {font-size:18px;}
	.cargo-index >>> div.cell{text-align: center;}
	.info{position:fixed;top:0; left:0;right:0;bottom:0;background:rgba(0,0,0,.6); z-index: 9999; overflow: hidden;}
	.info-content{position:absolute; top:50%;left:50%;transform: translate(-50%,-50%); width:10rem;border-radius: 0.2rem;
		background:#fff;
		border: .02rem solid #eaeaea;
    	box-shadow: 0 0 0.5rem #cac6c6;
    	overflow: hidden;
    }
     .info-content .header-title{
		width:100%;
		height:.8rem;
		background:#20A0FF;
		position:relative;
		text-align: center;
		line-height: .8rem;
		color:#fff;
		font-size: 0.34rem;
		font-weight: bold;
	}
	.add-content{
		padding: 0.3rem;
	}
	.inputStyle{
		display: flex;
		align-items: center;
		justify-content: space-around;
		margin-bottom:.4rem;
	}
	.inputStyle .title{
		flex-direction: row-reverse;
		display: flex;
		padding-right:.1rem;
		text-align: right;
        flex-basis:1.6rem;
        color:#999;
	}
	.icon-color{
		color:red;
		position:absolute;
	    left:.1rem;
	}
	.title{
		flex-direction: row-reverse;
		display: flex;
		padding-right:.1rem;
		text-align: right;
        flex-basis:1.6rem;
        color:#999;
	}
	.my-textarea{
		border-radius: 4px;
        border: 1px solid #dcdfe6;
        padding:10px;
        }
    .layer{
     	position:absolute;
     	top: 0;
     	bottom:0;
     	left: 0;
     	right: 0;
     	background:rgba(0,0,0,.6);
     	z-index: 999;
     	display: flex;
     	justify-content: center;
     	align-items: center;
     }
</style>